<template>
    <div class="box">
        <!-- 1.柱状图 -->
        <div id="main">
        </div>
        
    </div>
   
</template>
<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
 
    export default{
        props:['data'],
        data(){
            return{
                
            }
        },
        created(){
            // 注册必须的组件
            echarts.use([
                TitleComponent,
                TooltipComponent,
                GridComponent,
                DatasetComponent,
                TransformComponent,
                BarChart,
                LabelLayout,
                UniversalTransition,
                CanvasRenderer
            ]);
        },
        mounted(){
            // 接下来的使用就跟之前一样，初始化图表，设置配置项
            var myChart = echarts.init(document.getElementById('main'));
            let colors=['#FF69B4','#00FFFF','#DC143C','#E9967A','#B22222','#ADFF2F'];
            let option={
                title: {
                    text: '商品推荐榜(近90天)'
                },
                tooltip: {},
                xAxis: {
                    
                },
                yAxis: {
                    data: this.data.map(item => item.goodsName)  //1.名字
                },
                series: [
                    {
                    name: '销量',
                    type: 'bar',
                    data: this.data.map(item=>item.number),  //2.数量
                    itemStyle:{
                        color:params=> colors[params.dataIndex] || '#4B0082'
                    }
                    }
                ]
            }
            myChart.setOption(option);
        }
    }
</script>
<style>
.box{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#main{
    width: 350px;
    height: 300px;
    margin: 40px auto;
}

</style>